<!DOCTYPE html>
<html>
<head>
    <title>测试类的使用</title>

    <script>
        class Person {
            // constructor(name, age) {
            //     this.name = name;
            //     this.age = age;
            // }

            speak() {
                console.log(`姓名${this.name}, 年龄${this.age}`);
            }
        }

        class Student extends Person {
            constructor(name, age, grade) {
                // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
                super(name, age)
                this.grade = grade;
            }

            exam() {
                console.log(`就读于${this.grade}，现在正在考试哦...`);
                this.study(); //可以成功
            }

            study() {
                console.log("666");
                console.log("我研究下this: ", this);
            }
        }


        let p1 = new Person("jay", "42");
        let p2 = new Person("leehong", "45");
        p1.speak();
        p2.speak();

        let s1 = new Student("shujun", "32", "b站");
        s1.speak();
        s1.exam();
        console.log(s1);
        s1.study();
        let x = s1.study;
        x(); //会undefined，脱离实例去访问this

        Student.prototype.nickname = 'jaychou';
        console.log(s1.nickname);
        console.log(s1.__proto__ === Student.prototype)

    </script>
</head>
<body>
    
    es6中，js类和java有的一比嘛
    还有extends继承。<br/>

    <a href="https://www.jianshu.com/p/6e79cf8cff5d">面试 | 你不得不懂得 JS 原型和原型链</a>
    <br/>
    js原型：
    __proto__, 暂时理解：就是换了一个名字，实际上就算java的父类吧;
    但是又不完全一样，比如java里面，此例的exam应该在自己类上，不在父类上；
    但是js中的本身的方法也放到原型中去了
    原型或者可以理解为：静态文件类本书？ 父类+自身方法？

    <br/>
    原型链：继承关系形成的链条，本例子中：
    Student extends Person extend Object

    <p>
        this也是非常有学问的
        <ul>函数中指向window，如果开启 use staitc, 那么不好意思，undefined</ul>
        <ul>类中指向实例，但是在函数中直接调用(上面的x(), 或者react的onClick, 则是undefined)</ul>
    </p>

</body>
</html>